<template>
  <div class="dashboard-container">
    <!-- 核心数据概览 -->
    <el-row :gutter="20" class="data-overview">
      <el-col :span="6">
        <el-card class="overview-card sales-card">
          <div class="card-content">
            <div class="card-icon">💰</div>
            <div class="card-info">
              <div class="card-title">今日销售额</div>
              <div class="card-value">¥{{ overview.todaySales || 0 }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="overview-card order-card">
          <div class="card-content">
            <div class="card-icon">📦</div>
            <div class="card-info">
              <div class="card-title">今日订单数</div>
              <div class="card-value">{{ overview.todayOrders || 0 }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="overview-card user-card">
          <div class="card-content">
            <div class="card-icon">👥</div>
            <div class="card-info">
              <div class="card-title">新增用户</div>
              <div class="card-value">{{ overview.newUsers || 0 }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="overview-card product-card">
          <div class="card-content">
            <div class="card-icon">🍎</div>
            <div class="card-info">
              <div class="card-title">在售商品</div>
              <div class="card-value">{{ overview.activeProducts || 0 }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="charts-section">
      <el-col :span="16">
        <el-card>
          <div slot="header">
            <span>销售趋势</span>
          </div>
          <div class="chart-container">
            <div ref="salesChart" class="chart"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div slot="header">
            <span>订单状态分布</span>
          </div>
          <div class="chart-container">
            <div ref="orderStatusChart" class="chart"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 最新动态 -->
    <el-row :gutter="20" class="recent-activity">
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>最新订单</span>
          </div>
          <div class="activity-list">
            <div class="activity-item" v-for="order in recentOrders" :key="order.id">
              <div class="activity-content">
                <span class="order-no">订单号: {{ order.orderNo }}</span>
                <span class="order-amount">¥{{ order.amount }}</span>
                <span class="order-time">{{ order.time }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>待处理事项</span>
          </div>
          <div class="activity-list">
            <div class="activity-item" v-for="task in pendingTasks" :key="task.id">
              <div class="activity-content">
                <span class="task-type">{{ task.type }}</span>
                <span class="task-count">{{ task.count }} 项</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快捷入口 -->
    <el-row :gutter="20" class="quick-links">
      <el-col :span="24">
        <el-card>
          <div slot="header">
            <span>管理模块</span>
          </div>
          <div class="links-grid">
            <el-button
              v-for="menu in menuList"
              :key="menu.path"
              @click="goTo(menu.path)"
              :type="menu.type"
              plain
              size="medium"
            >
              {{ menu.name }}
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {
      overview: {
        todaySales: 12860,
        todayOrders: 42,
        newUsers: 18,
        activeProducts: 156
      },
      recentOrders: [
        {id: 1, orderNo: 'DD20250301001', amount: 256.8, time: '10:30'},
        {id: 2, orderNo: 'DD20250301002', amount: 189.5, time: '09:45'},
        {id: 3, orderNo: 'DD20250301003', amount: 98.0, time: '09:15'},
        {id: 4, orderNo: 'DD20250301004', amount: 324.6, time: '08:50'}
      ],
      pendingTasks: [
        {id: 1, type: '待发货订单', count: 8},
        {id: 2, type: '待处理退款', count: 3},
        {id: 3, type: '库存预警商品', count: 5},
        {id: 4, type: '待审核商品', count: 2}
      ],
      menuList: [
        {name: '分类管理', path: '/category', type: 'primary'},
        {name: '商品管理', path: '/product', type: 'success'},
        {name: '用户管理', path: '/user', type: 'warning'},
        {name: '商品订单', path: '/order', type: 'danger'},
        {name: '支付订单', path: '/payment', type: 'info'},
        {name: '退款订单', path: '/refund', type: 'primary'}
      ],
      resizeHandler: null
    }
  },
  mounted() {
    // 在组件挂载后初始化图表
    this.initCharts(),
      this.initResizeHandler()
  },
  beforeDestroy() {
    // 组件销毁前清理图表实例
    if (this.salesChart) {
      this.salesChart.dispose()
    }
    if (this.orderStatusChart) {
      this.orderStatusChart.dispose()
    }
    // 移除窗口大小监听
    if (this.resizeHandler) {
      window.removeEventListener('resize', this.resizeHandler)
    }
  },
  methods: {
    goTo(path) {
      this.$router.push(path)
    },
    initCharts() {
      // 初始化销售趋势图
      this.initSalesChart()
      // 初始化订单状态分布图
      this.initOrderStatusChart()
    },

    initSalesChart() {
      // 销售趋势图数据
      const salesData = {
        dates: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        sales: [12000, 18000, 15000, 22000, 19000, 25000, 21000]
      }

      // 获取 DOM 元素并初始化图表
      const chartDom = this.$refs.salesChart
      this.salesChart = echarts.init(chartDom)

      // 配置图表选项
      const option = {
        tooltip: {
          trigger: 'axis',
          formatter: '{b}<br/>销售额: ¥{c}'
        },
        xAxis: {
          type: 'category',
          data: salesData.dates
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '¥{value}'
          }
        },
        series: [{
          data: salesData.sales,
          type: 'line',
          smooth: true,
          areaStyle: {
            color: '#409EFF'
          },
          itemStyle: {
            color: '#409EFF'
          }
        }]
      }

      // 设置图表配置并渲染
      this.salesChart.setOption(option)
    },
    initOrderStatusChart() {
      // 订单状态分布数据
      const statusData = [
        {value: 32, name: '待支付'},
        {value: 18, name: '待发货'},
        {value: 25, name: '已发货'},
        {value: 12, name: '已完成'},
        {value: 5, name: '已取消'}
      ]

      // 获取 DOM 元素并初始化图表
      const chartDom = this.$refs.orderStatusChart
      this.orderStatusChart = echarts.init(chartDom)

      // 配置图表选项
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '订单状态',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '14',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: statusData
          }
        ]
      }

      // 设置图表配置并渲染
      this.orderStatusChart.setOption(option)
    },
    initResizeHandler() {
      // 使用防抖优化性能
      this.resizeHandler = this.debounce(() => {
        if (this.salesChart) {
          this.salesChart.resize()
        }
        if (this.orderStatusChart) {
          this.orderStatusChart.resize()
        }
      }, 300)

      window.addEventListener('resize', this.resizeHandler)
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 10px;
  }
}

.data-overview {
  margin-bottom: 15px;

  .overview-card {
    border-radius: 8px;

    .card-content {
      display: flex;
      align-items: center;

      .card-icon {
        font-size: 32px;
        margin-right: 15px;
      }

      .card-info {
        .card-title {
          font-size: 14px;
          color: #666;
          margin-bottom: 5px;
        }

        .card-value {
          font-size: 20px;
          font-weight: bold;
        }
      }
    }
  }

  .sales-card {
    border-left: 4px solid #409eff;
  }

  .order-card {
    border-left: 4px solid #67c23a;
  }

  .user-card {
    border-left: 4px solid #e6a23c;
  }

  .product-card {
    border-left: 4px solid #f56c6c;
  }
}

.charts-section {
  margin-bottom: 15px;

  .chart-container {
    height: 300px;

    .chart {
      width: 100%;
      height: 100%;
    }
  }
}

.recent-activity {
  margin-bottom: 15px;

  .activity-list {
    max-height: 300px;
    overflow-y: auto;

    .activity-item {
      padding: 12px 0;
      border-bottom: 1px solid #eee;

      &:last-child {
        border-bottom: none;
      }

      .activity-content {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .order-no,
        .task-type {
          flex: 2;
          font-size: 14px;
        }

        .order-amount,
        .task-count {
          flex: 1;
          text-align: center;
          font-weight: bold;
        }

        .order-time {
          flex: 1;
          text-align: right;
          color: #999;
          font-size: 12px;
        }
      }
    }
  }
}

.quick-links {
  .links-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;

    .el-button {
      margin: 0;
      min-width: 120px;
    }
  }
}
</style>
